<template>
  <u-popup
    class="padding"
    custom-style="width:90%"
    :safeAreaInsetBottom="true"
    :safeAreaInsetTop="true"
    :mode="popupData.mode"
    :show="showDetail || transferDialogVisible"
    :round="popupData.round"
    :overlay="popupData.overlay"
    :closeable="popupData.closeable"
    :closeOnClickOverlay="popupData.closeOnClickOverlay"
    @close="close"
  >
    <view class="padding" v-show="showDetail && !transferDialogVisible">
      <view class="padding-tb margin-top grid col-3">
        <view
          class="flex-col text-df flex-center"
          v-for="item in list"
          :key="item.key"
        >
          <view class="margin-top text-grey flex">{{ item.lable }}</view>
          <view
            class="text-cut w100 text-center text-bold"
            @click="showInfoToast(item.value)"
            >{{ item.value || "--" }}</view
          >
        </view>
      </view>
    </view>
    <u-modal
      :show="transferDialogVisible"
      showCancelButton
      :closeOnClickOverlay="false"
      @confirm="confirm"
      @cancel="closeEditor"
      @close="closeEditor"
    >
      <u-form
        v-if="transferDialogVisible"
        class="padding w100 bg-white bd-r"
        :model="form"
        :rules="rules"
        ref="uForm"
      >
        <u-form-item label-width="90" label="转账账号Id" prop="advertiser_name">
          <u-input
            v-model="form.advertiser_name"
            placeholder="请输入转账账号Id"
          />
        </u-form-item>
        <u-form-item
          label-width="90"
          label="转入账号Id"
          prop="target_advertiser_name"
        >
          <u-input
            v-model="form.target_advertiser_name"
            placeholder="请输入转入账号Id"
          />
        </u-form-item>
        <u-form-item label-width="90" label="金额, 单位元" prop="amount">
          <u-input v-model="form.amount" placeholder="请输入金额" />
        </u-form-item>
      </u-form>
    </u-modal>
  </u-popup>
</template>

<script>
import { toast } from "@/common/toast.js";
const langMapAll = {
  target_advertiser_name: "转入账户名",
  advertiser_name: "转出账户名",
  create_time: "转账时间",
  transaction_seq: "交易号",
  reason: "原因",
};

import { createTransfer } from "@/api";
import { mapGetters } from "vuex";
export default {
  props: {
    info: {
      type: Object,
      default() {
        return {};
      },
    },
    showDetail: {
      type: Boolean,
      default: false,
    },
    transferDialogVisible: {
      type: Boolean,
      default: false,
    },
  },

  data() {
    return {
      form: {
        advertiser_name: undefined,
        target_advertiser_name: undefined,
        amount: undefined,
      },
      editorData: {},
      ctx: undefined,
      showEditor: false,
      popupData: {
        closeable: true,
        overlay: true,
        mode: "center",
        round: 10,
        closeOnClickOverlay: true,
      },
      rules: {
        advertiser_name: [
          {
            required: true,
            message: "请输入转账账号Id",
            trigger: ["blur", "change"],
          },
        ],
        target_advertiser_name: [
          {
            required: true,
            message: "请输入转入账号Id",
            trigger: ["blur", "change"],
          },
        ],
        amount: [
          {
            required: true,
            message: "请输入金额",
            trigger: ["blur", "change"],
          },
        ],
      },
    };
  },
  computed: {
    ...mapGetters(["isAdmin", "curProStatus"]),

    list() {
      return Object.keys(langMapAll).map((key) => {
        return {
          key,
          canEdit: [].includes(key),
          lable: langMapAll[key],
          value: this.info[key],
        };
      });
    },
  },
  methods: {
    showInfoToast(v) {
      toast({ title: v });
    },
    closeEditor() {
      this.$emit("update:transferDialogVisible", false);
      this.form.advertiser_name = undefined;
      this.form.target_advertiser_name = undefined;
      this.form.amount = undefined;
    },
    confirm() {
      this.$refs.uForm
        .validate()
        .then((res) => {
          console.log("this.form.val", this.form);
          let { advertiser_name, target_advertiser_name, amount } = this.form;
          createTransfer({
            channel: this.isAdmin ? 0 : this.curProStatus == "pdd" ? 1 :this.curProStatus == "jd" ?4: 3,
            advertiser_id: Number(advertiser_name),
            target_advertiser_id: Number(target_advertiser_name),
            amount: Number(amount),
          }).then(() => {
            this.$emit("update:transferDialogVisible", false);
            this.$emit("fresh");
            this.form.advertiser_name = undefined;
            this.form.target_advertiser_name = undefined;
            this.form.amount = undefined;
          });
        })
        .catch((errors) => {
          console.error(errors);
          uni.$u.toast("表单校验失败");
        });
    },
    close() {
      this.$emit("update:showDetail", false);
      this.$emit("update:transferDialogVisible", false);
    },
  },
};
</script>
<style lang="scss" scoped>
.login {
  width: 100%;
  background-image: url("~@/static/bg.png");
  background-repeat: no-repeat;
  background-size: cover;
}
</style>
